import React from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { FaSignOutAlt, FaUser } from 'react-icons/fa';
import '../styles/Navbar.css';

const Navbar = () => {
  const { user, logout } = useAuth();

  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <Link to="/dashboard">
          <h1>情报采集监控系统</h1>
        </Link>
      </div>
      
      <div className="navbar-user">
        {user && (
          <>
            <span className="user-info">
              <FaUser className="user-icon" />
              <span>{user.username}</span>
              <span className="user-role">{getRoleLabel(user.role)}</span>
            </span>
            
            <button className="logout-btn" onClick={logout} title="退出登录">
              <FaSignOutAlt />
            </button>
          </>
        )}
      </div>
    </nav>
  );
};

// 用户角色标签
const getRoleLabel = (role) => {
  const roleMap = {
    'admin': '管理员',
    'user': '用户',
    'viewer': '查看者'
  };
  
  return roleMap[role] || role;
};

export default Navbar; 